<template>
	<!-- 摇一摇 -->
	<view class="content page" :class="{minH:isComponent==1}" :style="bgImgStyle">

		<status-bar :title='getactrule.title' :goHome='fromShare'></status-bar>


		<view class="contentallbox" v-if='!msg'>
			<image class="tiImg" :src="$imgUrls(getactrule.img)" mode="widthFix"></image>

			<view class="turntable_w">
				<image class="turntable_wImg" :class="marquee?'_wImg':''" :src="staticUrl+'/lottery/zp.png'"
					mode="scaleToFill"></image>
				<image class="turntablephone" @click="shake" :class="active?'shark':''"
					:src="staticUrl+'/lottery/phone.png'" mode="scaleToFill"></image>
			</view>

			<view class="winning" v-if="getactrule.winningUser">
				<swiper autoplay="true" interval="3000" duration="1000" circular="true" vertical="true" class="swiper"
					disable-touch="true">
					<swiper-item v-for="(winn,index) in getactrule.winningUser" :key="index">
						<view class="swiper-item">{{winn.text}}</view>
					</swiper-item>
				</swiper>
			</view>


			<view class="btnBox">
				<view @click="btnlook(3)" class="view_btn"
					:style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">
					活动说明</view>
				<view @click="btnlook(2)" class="view_btn"
					:style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">
					我的奖品</view>
			</view>


		</view>


		<empty type='1' v-if='msg' cat='2' :msg='msg'></empty>

		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>

		<Popup v-if="PopupIsShow" :viewText="getactrule.details" :types="types" :prizeDate="prizeDate"
			@closepopup="closePopups"></Popup>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import Popup from "../components/popup.vue"
	export default {
		props: ['gid', 'isComponent'],
		components: {
			Popup
		},
		data() {
			return {
				showModal: false,
				audioCtx: null, // 音频实例
				marquee: true,
				active: false, // 是否开启摇一摇
				PopupIsShow: false,
				types: '', //弹窗类型
				cid: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				prizeDate: '', //抽奖返回数据
				getactrule: '',
				global: {
					lastTime: 0, //此变量用来记录上次摇动的时间
					intervalTime: 500, // 两次摇一摇的间隔事件
					lastX: 0,
					lastY: 0,
					lastZ: 0, //此组变量分别记录对应x、y、z三轴的数值和上次的数值
					shakeSpeed: 150 //设置阈值
				},
				shakePhone: null,
				msg: '',
				ondrawing: false, // true正在抽奖 避免重复点击
				fromShare: 0, // 是否来自分享 1是 显示返回首页
				progress: 1,

			}
		},
		onHide() {
			uni.stopAccelerometer();
		},

		onLoad(e) {
			if (e.fromShare) this.fromShare = e.fromShare;
			if (!e.cid) return;
			this.cid = e.cid
			// 监听摇一摇事件
			this.starshake();

			this.getinitialdata() //获取活动配置信息
			// 声明音频实例
			this.audioCtx = uni.createInnerAudioContext();
			this.audioCtx.src = this.$imgUrl + '/static/lottery/shark.mp3';

		},

		methods: {
			starshake() {
				if (!this.vid) return this.showModal = true;
				uni.onAccelerometerChange((acceleration) => {
					const nowTime = new Date().getTime();
					if (nowTime - this.global.lastTime <= 100) return;
					let diffTime = nowTime - this.global.lastTime; //记录时间段
					this.global.lastTime = nowTime; // 记录本次摇动时间，为下次计算摇动时间做准备
					let x = acceleration.x; // 获取x轴数值，x轴为垂直于北轴，向东为正
					let y = acceleration.y; // 获取y轴数值，y轴向正北为正
					let z = acceleration.z; // 获取z轴数值，z轴垂直于地面，向上为正
					let speed = (Math.abs(x + y + z - this.global.lastX - this.global.lastY - this.global.lastZ) /
						diffTime) * 10000;

					if (speed > this.global.shakeSpeed && !this.ondrawing) {
						this.ondrawing = true;
						console.log('3');
						this.audioCtx.play();
						this.actives();
						setTimeout(() => {
							uni.showLoading({
								title: "抽奖中"
							})
							this.getLuckDraw();
						}, 2000);
					}
					this.global.lastX = x;
					this.global.lastY = y;
					this.global.lastZ = z;
				})
			},

			closeModel() {
				this.showModal = false
				this.getinitialdata() //获取活动配置信息
				this.marquees()
			},

			getLuckDraw() {
				this.$http.post({
					url: '/SRA_LuckDraw/getPrize',
					data: {
						VeriCode: this.bid,
						cid: this.cid,
					}
				}).then(res => {
					console.log('6');
					clearInterval(this.shakePhone);
					this.active = false;

					if (res.code != 100) {
						this.ondrawing = false
						this.$Toast(res.notice);
						uni.startAccelerometer();
						return;
					}
					const result = res.data;
					if (result.prizeDate) this.prizeDate = result;
					setTimeout(() => {
						this.btnlook(1)
						uni.hideLoading()
						this.ondrawing = false;
						uni.startAccelerometer();
					}, 1500)


				})
			},

			marquees() {
				setInterval(() => {
					this.marquee = !this.marquee
				}, 500)
			},
			actives() {
				this.shakePhone = setInterval(() => {
					this.active = !this.active
				}, 500)
			},
			btnlook(i) {
				if (!this.vid) return this.showModal = true;
				if (i == 2) return this.toUrl(`prizeList?cid=${this.cid}`);
				this.PopupIsShow = true;
				this.types = i
			},
			closePopups() {
				this.PopupIsShow = false
				this.getinitialdata()
			},
			//获取活动配置信息
			getinitialdata() {
				this.$http.post({
					url: '/SRA_LuckDraw/config',
					data: {
						VeriCode: this.bid,
						cid: this.cid
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.notice);
					const result = res.data;
					this.getactrule = result;
					this.$BarTitle(result.title);
				})
			}
		},

		computed: {
			...mapState(['bid', 'share', 'vid']),
			bgImgStyle() {
				if (!this.getactrule) return;
				return ['background-image:' + 'url(' + this.$imgUrls(this.getactrule.backImg) + ')'].join(';')
			}
		},
		onShareAppMessage() {
			this.$addShareNum('games', this.cid, '1')
			return {
				title: this.getactrule.title,
				path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=17&gid=default&cid=' + this.cid
			}
		},
		onShareTimeline() {
			this.$addShareNum('games', this.cid, '2')
			const shareData = this.share;
			return {
				title: this.getactrule.title,
				query: `share_v_id=${this.vid}&cid=${this.cid}&fromShare=1`,
				imageUrl: this.getactrule.img ? this.$imgUrls(this.getactrule.img) : shareData.imageUrl
			}
		},

	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30upx;
		overflow: hidden;

		&.minH {
			min-height: calc(100vh - 100rpx) !important;
		}

		background-repeat: no-repeat;
		background-size: 100% 100%;

		.contentallbox {
			width: 100%;
			height: 100%;
			position: relative;

			.tiImg {
				width: 560rpx;
				display: block;
				margin: 0 auto;
			}

			.turntable_w {
				width: 600upx;
				height: 600upx;
				box-shadow: 0px 3px 2px 1px rgba(123, 58, 229, 0.5);
				border-radius: 100%;
				border-radius: 100%;
				margin: 0 auto;
				position: relative;

				.turntable_wImg {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}

				._wImg {
					transform: rotate(15deg);
				}

				.turntablephone {
					width: 562rpx;
					height: 632rpx;
					position: absolute;
					z-index: 5;
					left: -30rpx;
					bottom: 36rpx;
				}

				.shark {
					left: 4upx;
					bottom: 54upx;
					transform: rotate(30deg);
				}
			}

			.winning {
				width: 90%;
				margin-left: 5%;
				height: 60upx;
				border-radius: 10upx;
				background: rgba(0, 0, 0, 0.5);
				color: #f4c837;
				margin-top: 20upx;
				text-align: center;
				line-height: 60upx;

				.swiper {
					width: 100%;
					height: 100%;
				}
			}

			.btnBox {
				display: flex;
				justify-content: center;

				.view_btn {
					width: 310rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 32upx;
					color: #ae1f30;
					margin: 30rpx 16rpx;
				}
			}
		}
	}
</style>